<template>
    <div class="rank">
      <div class="rank-hd">
        <img  class="jangbei" src="@/assets/images/icon_jiangbei.png" alt="">
        <span class="rank-title">三月总榜</span>
        </div>

        <!-- 列表 -->
        <table>
          <thead>
            <tr>
              <th class="column" >排名</th>
              <th class="column" >用户ID</th>
              <th class="column" >得分</th>
            </tr>
          </thead>
         <tbody>
          <tr  v-for="item in rankingData">
            <td class="column jiangbei" >
              <img src="@/assets/images/首页／排行榜／名次／图标@2x.png" alt="">
            </td>
            <td class="column user-info">
              <img :src="'http://47.120.14.63:8081/image/' + item.head" alt="">
            </td>
            <td class="column score" >{{item.total}}</td>
          </tr>
         </tbody>
        </table>
    </div>
</template>

<script setup lang=ts>
import { log } from 'console';
import {onMounted, ref} from 'vue'
import {totalPointsApi} from '../api/score.js'

const rankingData = ref([])

onMounted(() => {
  getscoreData()
})

function getscoreData() {
  totalPointsApi()
  .then(res=>{
    rankingData.value = res.data.data

    
    
  })
}


</script>

<style scoped lang=scss>
.rank {
  width: 5rem;
  height: 8.4875rem;
  border-radius: 0.1rem;
  border: 0.025rem solid #139DFF;
  
}
.rank-hd {
  display: flex;
  position: relative;
  width: 5rem;
  height: 0.75rem;
  align-items: center;
  background-color: rgb(19, 157, 255);
  .jangbei {
    position: absolute;
    left: 1.0125rem;
    width: 0.475rem;
    height: 0.4375rem;
  }
  .rank-title {
    position: absolute;
    left: 1.7rem;
    font-size: 0.3rem;
    color: #FFFFFF;
  }
}


table {
  margin-top: 0.15rem;
  width: 5rem;
  font-size: 0.2rem;
  border-collapse: collapse;
  img {
    width: 0.6rem;
    height: 0.6rem;
  }
}
td,th {
  padding: 0.125rem;
  height: 0.6rem;
  
}
.column {
  width: 33.33%;
}
.jiangbei {
 
}
.user-info {
  display: flex;
  justify-content: center;
  img {
    width: 0.4125rem;
    height: 0.4rem;
  }
  span {
    display: flex;

  }
  
}

</style>